<template>
  <div class="pad-20 bgc-default">
    <div class="pad-20 bg-color-white">
      <!--顶部搜索 -->
      <div class="top-operate-default flex-col" style="align-items: baseline; padding: 20px 0; height: 100%; ">
        <div class="search-item">
          <label>搜索：</label>
          <el-select class="select-class" v-model="textCol" style="width: 120px">
            <el-option :label="iten.labelValue" :value="iten.columnName" :key="iten.columnName"
              v-for="(iten,index) in selectColumnOptions"></el-option>
            <!--  <el-option label="平台单号" value="platformOrderNo"></el-option>
            <el-option label="系统单号" value="systemOrderNo"></el-option>
            <el-option label="发票抬头" value="invoiceRise"></el-option>
            <el-option label="单位税号" value="distinguishNum"></el-option>
            <el-option label="单位地址" value="registerAddress"></el-option>
            <el-option label="单位电话" value="taxPhone"></el-option>
            <el-option label="开户银行" value="accountBankInfo"></el-option>
            <el-option label="银行账号" value="bankCardNo"></el-option>
            <el-option label="备注" value="remark"></el-option> -->
          </el-select>
          <el-input @keyup.enter.native="handleSearch" v-model="textValue" placeholder="请输入关键词"></el-input>
          <!-- <el-input @keyup.enter.native="handleSearch" v-model.trim="searchListQuery.invoiceContent" placeholder="请输入开票内容"></el-input> -->
          <label class="mar-l-20">开票模式：</label>
          <el-select v-model="searchListQuery.invoiceMethod" class="down-select">
            <el-option label="全部" value=""></el-option>
            <el-option :label="invoiceMethod[0]" value="0"></el-option>
            <el-option :label="invoiceMethod[1]" value="1"></el-option>
          </el-select>
          <label class="mar-l-20">开票内容：</label>
          <el-select v-model="searchListQuery.invoiceContentId" class="down-select">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="(item, index) in invoiceContentList" :key="index" :label="item.invoiceContent"
              :value="item.invoiceContentId"></el-option>
          </el-select>

          <label class="mar-l-20">抬头类型：</label>
          <el-select v-model="searchListQuery.invoiceRiseType">
            <el-option label="全部" value=""></el-option>
            <el-option :label="invoiceRiseType[0]" value="0"></el-option>
            <el-option :label="invoiceRiseType[1]" value="1"></el-option>
          </el-select>
          <div v-if="searchListQuery.invoiceRiseType === '1'">
            <label class="mar-l-20">发票类型：</label>
            <el-select v-model="searchListQuery.invoiceType" class="down-select">
              <el-option label="全部" value=""></el-option>
              <el-option :label="invoiceType[0]" value="0"></el-option>
              <el-option :label="invoiceType[1]" value="1"></el-option>
            </el-select>
          </div>
        </div>
        <div class="search-item mar-t-10">
          <label>时间筛选：</label>
          <el-select class="pad-l-10" v-model="timeCol">
            <el-option label="申请时间" value="createTime"></el-option>
            <el-option label="开票时间" value="passTime"></el-option>
            <el-option label="邮寄时间" value="mailingTime"></el-option>
            <el-option label="拒绝时间" value="rejectTime"></el-option>
            <el-option label="作废时间" value="voidTime"></el-option>
          </el-select>
          <el-date-picker v-model="timeValue" type="datetimerange" range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>

          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <!--开票状态 -->
      <div class="tabs-box mar-t-15">
        <el-tabs type="card" v-model="invoiceStatus" @tab-click="invoiceStatusClick">
          <el-tab-pane :label="allLabel" name="-1"></el-tab-pane>
          <el-tab-pane :label="waitCheckLabel" name="1"></el-tab-pane>
          <el-tab-pane :label="waitMailedLabel" name="2"></el-tab-pane>
          <el-tab-pane :label="alreadyMailedLabel" name="3"></el-tab-pane>
          <el-tab-pane :label="notPassLabel" name="4"></el-tab-pane>
          <el-tab-pane :label="abolishedLabel" name="5"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- 全选、操作 -->
      <div class="mar-t-10 mar-b-10">
        <span>已开票合计金额：￥{{alreadyOpenedAmount}}</span>
        <span>待审核合计金额：￥{{pendingReviewAmount}}</span>
      </div>

      <el-table ref="multipleTable" :data="dataList" v-loading="listLoading" element-loading-text="加载中"
        style="width: 100%" header-cell-class-name="default-header" row-class-name="default-row">
        <el-table-column label="开票金额" align="left" prop="amount">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="'开票单号：'+scope.row.invoiceCode" placement="top-start">
              <el-button :class="scope.row.invoiceMethod === 0 ? 'platform_class':'apply_class'">
                {{invoiceMethod[scope.row.invoiceMethod]}}
              </el-button>
            </el-tooltip>
            ￥{{scope.row.amount}}
            <el-popover placement="right" width="720" height="320px" trigger="click">
              <el-table :data="scope.row.projectOrderDTOList" style="width: 100%" height="320">
                <el-table-column label="开票金额" align="left" v-if="scope.row.invoiceMethod === 0">
                  <template slot-scope="scope_order">
                    ￥{{scope_order.row.distributeTotalPrice}}
                  </template>
                </el-table-column>
                <el-table-column label="订单金额" align="left">
                  <template slot-scope="scope_order">
                    ￥{{scope_order.row.orderPrice}}
                  </template>
                </el-table-column>
                <el-table-column label="订单号" width="280px" align="left">
                  <template slot-scope="scope_order">
                    <div>
                      平台单号：<img class="width-16 height-16" :src="constant.platformIconObj[scope_order.row.externalPlatformType]" />
                      {{scope_order.row.externalOrderNo}}
                    </div>
                    <div>
                      系统单号：{{scope_order.row.orderNo}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="left">
                  <template slot-scope="scope_order">
                    <el-button type="text" size="medium" @click="handleOpenOrderDetail(scope_order.row)">
                      订单详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button slot="reference" type="text" size="medium">详情</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="开票内容" align="left" prop="invoiceContent">
        </el-table-column>
        <el-table-column label="发票详情" align="left">
          <template slot-scope="scope">
            <div><span class="color-label-l">抬头类型：</span>{{invoiceRiseType[scope.row.invoiceRiseType]}}</div>
            <div v-if="scope.row.invoiceRiseType === 1">
              <span class="color-label-l">发票类型：</span>{{invoiceType[scope.row.invoiceType]}}</div>
            <div v-if="scope.row.invoiceRise"><span class="color-label-l">发票抬头：</span>{{scope.row.invoiceRise}}</div>
            <div v-if="scope.row.invoiceRiseType === 1">
              <div v-if="scope.row.distinguishNum"><span class="color-label-l">单位税号：</span>{{scope.row.distinguishNum}}</div>
              <div v-if="scope.row.registerAddress"><span class="color-label-l">单位地址：</span>{{scope.row.registerAddress}}</div>
              <div v-if="scope.row.taxPhone"><span class="color-label-l">单位电话：</span>{{scope.row.taxPhone}}</div>
              <div v-if="scope.row.accountBankInfo"><span class="color-label-l">开户银行：</span>{{scope.row.accountBankInfo}}</div>
              <div v-if="scope.row.bankCardNo"><span class="color-label-l">开户账号：</span>{{scope.row.bankCardNo}}</div>
            </div>
            <div v-if="scope.row.remark"><span class="color-label-l">备注：</span>{{scope.row.remark}}</div>
          </template>
        </el-table-column>
        <el-table-column label="收件人信息" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.recipient"><span class="color-label-l">收件人：</span>{{scope.row.recipient}}</div>
            <div v-if="scope.row.receiptPhone"><span class="color-label-l">电话：</span>{{scope.row.receiptPhone}}</div>
            <div v-if="scope.row.receiptAddress"><span class="color-label-l">地址：</span>{{scope.row.receiptAddress}}</div>
          </template>
        </el-table-column>
        <el-table-column label="时间" align="left">
          <template slot-scope="scope">
            <div><span class="color-label-l">申请时间：</span>{{ scope.row.createTime }}</div>
            <div v-if="scope.row.passTime"><span class="color-label-l">开票时间：</span>{{ scope.row.passTime }}</div>
            <div v-if="scope.row.mailingTime"><span class="color-label-l">邮寄时间：</span>{{ scope.row.mailingTime }}</div>
            <div v-if="scope.row.rejectTime"><span class="color-label-l">拒绝时间：</span>{{ scope.row.rejectTime }}</div>
            <div v-if="scope.row.voidTime"><span class="color-label-l">作废时间：</span>{{ scope.row.voidTime }}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="140" align="left">
          <template slot-scope="scope">
            <span>{{statusOptions[scope.row.status]}}</span>
            <el-popover placement="top" width="220" v-if="scope.row.status == 3" trigger="click">
              <div class="flex-col">
                <span><span class="color-label-l">快递公司：</span>{{ scope.row.expressName }}</span>
                <span><span class="color-label-l">快递单号：</span>{{ scope.row.trackingNo }}</span>
              </div>
              <el-button slot="reference" type="text">物流</el-button>
            </el-popover>
            <el-popover placement="top" width="220" v-if="scope.row.status == 4 || scope.row.status == 5"
              trigger="click">
              <div class="flex-col">
                <span>{{ scope.row.status == 4 ? '拒绝' : '作废' }}原因：{{ scope.row.statusRemark }}</span>
              </div>
              <el-button slot="reference" type="text">原因</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!-- 列表分页 -->
      <div class="pagination">
        <pagination :total="total" :page.sync="searchListQuery.currentPage" :limit.sync="searchListQuery.size"
          @pagination="initList" />
      </div>
    </div>
  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import {
    pageInvoiceManagement,
    statisticalInvoiceStatusNumOrTotalAmount
  } from '@/api/invoice/invoice'
  import {
    getInvoiceContentList
  } from '@/api/invoice/invoiceContent'

  export default {
    components: {},
    directives: {
      elDragDialog
    },
    data() {
      return {
        total: 0,
        // 表格加载标识
        listLoading: true,
        multipleSelection: [],
        // 查询表单
        searchListQuery: {
          currentPage: 1,
          size: 10,
          // 开票内容ID
          invoiceContentId: '',
          // 发票抬头类型
          invoiceRiseType: '',
          // 发票类型
          invoiceType: '',
          // 开票模式
          invoiceMethod: ''
        },
        allChecked: false,
        // 表格数据
        dataList: [],
        textCol: 'invoiceCode',
        textValue: '',
        timeCol: 'createTime',
        timeValue: [],
        invoiceStatus: '-1',
        invoiceContentList: [],
        gridData: [],
        checked: false,
        invoiceType: {
          0: '增值税普通发票',
          1: '增值税专用发票'
        },
        invoiceRiseType: {
          0: '个人',
          1: '企业'
        },
        invoiceMethod: {
          0: '申请开票',
          1: '平台代开'
        },
        statusOptions: {},
        alreadyOpenedAmount: 0.00,
        pendingReviewAmount: 0.00,
        allLabel: '全部(0)',
        waitCheckLabel: '待审核(0)',
        waitMailedLabel: '待邮寄(0)',
        alreadyMailedLabel: '已寄出(0)',
        notPassLabel: '未通过(0)',
        abolishedLabel: '已作废(0)',
        selectColumnOptions: [{
          'columnName': 'invoiceCode',
          'labelValue': '开票单号'
        }, {
          'columnName': 'platformOrderNo',
          'labelValue': '平台单号'
        }, {
          'columnName': 'systemOrderNo',
          'labelValue': '系统单号'
        }, {
          'columnName': 'invoiceRise',
          'labelValue': '发票抬头'
        }, {
          'columnName': 'distinguishNum',
          'labelValue': '单位税号'
        }, {
          'columnName': 'registerAddress',
          'labelValue': '单位地址'
        }, {
          'columnName': 'taxPhone',
          'labelValue': '单位电话'
        }, {
          'columnName': 'accountBankInfo',
          'labelValue': '开户银行'
        }, {
          'columnName': 'bankCardNo',
          'labelValue': '银行账号'
        }, {
          'columnName': 'remark',
          'labelValue': '备注'
        }]
      }
    },
    // 初始化页面
    created() {
      this.initList()
      this.getInvoiceContentList()
    },
    mounted() {},
    methods: {
      // 初始化
      initList() {
        this.listLoading = true
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.applyId = this.getMemberId()
        if (this.invoiceStatus === '-1') {
          this.searchListQuery.status = ''
        } else {
          this.searchListQuery.status = this.invoiceStatus
        }
        this.searchListQuery.notStatusList = '0'
        this.selectColumnOptions.forEach((item) => {
          this.searchListQuery[item.columnName] = ''
        })
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.dateColumn = this.timeCol
        this.searchListQuery.startDate = (this.timeValue && this.timeValue.length > 0) ? this.timeValue[0] : ''
        this.searchListQuery.endDate = (this.timeValue && this.timeValue.length > 1) ? this.timeValue[1] : ''
        // 统计状态和金额
        this.statisticalInvoiceStatusNumOrTotalAmount()
        pageInvoiceManagement(this.searchListQuery).then(response => {
          if (response.isError) return
          const dataList = response.data.records
          dataList.forEach(d => {
            d.managementPopoverValue = false
            d.invoiceApartManagementDTOList.forEach(apart => {
              apart.popoverValue = false
              apart.editSellerNameValue = ''
            })
          })
          this.dataList = dataList
          this.total = response.data.total
          this.statusOptions = response.data.dict.status
          this.listLoading = false
        })
      },
      // 统计状态对应的总金额
      statisticalInvoiceStatusNumOrTotalAmount() {
        statisticalInvoiceStatusNumOrTotalAmount(this.searchListQuery).then(response => {
          // 已开票总金额
          var alreadyOpenedAmount = 0
          // 待审核总金额
          var pendingReviewAmount = 0
          // 全部数量
          var allNum = 0
          var waitCheckNum = 0
          var waitMailedNum = 0
          var alreadyMailedNum = 0
          var notPassNum = 0
          var abolishedNum = 0
          if (!response.isError) {
            var resultData = response.data
            if (resultData && resultData.length > 0) {
              resultData.forEach((item) => {
                if (item.typeValue === 1) {
                  waitCheckNum = (item.totalCount || 0)
                  pendingReviewAmount = parseFloat(pendingReviewAmount) + parseFloat((item.totalPrice || 0))
                } else if (item.typeValue === 2) {
                  waitMailedNum = (item.totalCount || 0)
                  alreadyOpenedAmount = parseFloat(alreadyOpenedAmount) + parseFloat((item.totalPrice || 0))
                } else if (item.typeValue === 3) {
                  alreadyMailedNum = (item.totalCount || 0)
                  alreadyOpenedAmount = parseFloat(alreadyOpenedAmount) + parseFloat((item.totalPrice || 0))
                } else if (item.typeValue === 4) {
                  notPassNum = (item.totalCount || 0)
                } else if (item.typeValue === 5) {
                  abolishedNum = (item.totalCount || 0)
                }
                allNum = allNum + (item.totalCount || 0)
              })
            }
          }
          this.allLabel = '全部(' + allNum + ')'
          this.waitCheckLabel = '待审核(' + waitCheckNum + ')'
          this.waitMailedLabel = '待邮寄(' + waitMailedNum + ')'
          this.alreadyMailedLabel = '已寄出(' + alreadyMailedNum + ')'
          this.notPassLabel = '未通过(' + notPassNum + ')'
          this.abolishedLabel = '已作废(' + abolishedNum + ')'
          this.alreadyOpenedAmount = alreadyOpenedAmount.toFixed(2)
          this.pendingReviewAmount = pendingReviewAmount.toFixed(2)
        })
      },
      // 获取开票内容列表
      getInvoiceContentList() {
        getInvoiceContentList({
          enterpriseId: this.getEnterpriseId()
        }).then(response => {
          if (response.isError) return
          this.invoiceContentList = response.data
        })
      },
      // 状态页切换
      invoiceStatusClick() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 查询事件
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      resetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.timeCol = originData.timeCol
        this.timeValue = originData.timeValue
        this.searchListQuery = originData.searchListQuery
        this.initList()
      },
      // 跳转到订单详情
      handleOpenOrderDetail(orderRow) {
        console.log(orderRow)
        const routeData = this.$router.resolve({
          path: '/order/order/detail/index',
          query: {
            orderId: orderRow.orderId
          }
        })
        window.open(routeData.href, '_blank')
      }
    }
  }
</script>
<style lang="less" scoped>
  .color-label-l{
    color: #7d7d7d;
    min-width: 80px;
    text-align: right;
    display: inline-block;
    margin-left: -10px;
  }
  .apply_class {
    border: 1px solid #ebb563;
    border-radius: 4px;
    color: #e6a23c;
    background-color: #fdf6ec;
    padding: 3px;
    font-size: 10px;
  }

  .platform_class {
    border: 1px solid #66b1ff;
    border-radius: 4px;
    color: #409eff;
    background-color: #ecf5ff;
    padding: 3px;
    font-size: 10px;
  }

  .top-operate {
    margin-bottom: 0;
    height: 85px;
    background-color: #f7f8fa;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
  }

  .search-item {
    flex-shrink: 0;
    padding: 0 20px;

    >div,
    .el-cascader {
      margin-right: 0px;
    }

    label {
      font-weight: unset;
    }

    .el-input {
      width: 200px;
    }
  }

  .btn-search {
    height: 60px;
    display: flex;
    align-items: center;
  }

  .table-container {
    /deep/.el-table th>.cell {
      padding-left: 14px;
    }
  }

  .bgc-default {
    /deep/ .el-dialog__body {
      padding-bottom: 140px;
    }
  }

  .down-select {
    /deep/.el-input {
      width: 200px;
    }
  }
</style>
